import styled from "styled-components";
const PadButtonWrapper = styled.div`
  height: 100%;
  width: 100%;

  .button {
    display: flex;
    position: relative;
    background: linear-gradient(to bottom, #f4f4f4, #ccc);

    height: 96%;
    width: 98%;
    text-align: center;
    cursor: pointer;
  }
  .button .text {
    position: absolute;
    z-index: 1;
    top: -1px;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .button .tilt {
    display: inline-block;
    position: relative;
    z-index: 2;
    flex-grow: 1;
  }
  .button .background {
    position: absolute;
    top: -2px;
    left: -1px;
    height: 100%;
    width: calc(100% + 2px);
    background: #f4f4f4;
  }
  .button:active .text {
    top: 1px;
  }
  .button:active .background {
    top: -1px;
  }
  .button .tilt-1:active ~ .background,
  .button .tilt-1:active ~ .text {
    transform: skewY(-1.3deg);
  }
  .button .tilt-2:active ~ .background,
  .button .tilt-2:active ~ .text {
    transform: skewY(-1.1deg);
  }
  .button .tilt-3:active ~ .background,
  .button .tilt-3:active ~ .text {
    transform: skewY(-0.9deg);
  }
  .button .tilt-4:active ~ .background,
  .button .tilt-4:active ~ .text {
    transform: skewY(-0.7deg);
  }
  .button .tilt-5:active ~ .background,
  .button .tilt-5:active ~ .text {
    transform: skewY(-0.5deg);
  }
  .button .tilt-6:active ~ .background,
  .button .tilt-6:active ~ .text {
    transform: skewY(-0.3deg);
  }
  .button .tilt-7:active ~ .background,
  .button .tilt-7:active ~ .text {
    transform: skewY(-0.1deg);
  }
  .button .tilt-8:active ~ .background,
  .button .tilt-8:active ~ .text {
    transform: skewY(0.1deg);
  }
  .button .tilt-9:active ~ .background,
  .button .tilt-9:active ~ .text {
    transform: skewY(0.3deg);
  }
  .button .tilt-10:active ~ .background,
  .button .tilt-10:active ~ .text {
    transform: skewY(0.5deg);
  }
  .button .tilt-11:active ~ .background,
  .button .tilt-11:active ~ .text {
    transform: skewY(0.7deg);
  }
  .button .tilt-12:active ~ .background,
  .button .tilt-12:active ~ .text {
    transform: skewY(0.9deg);
  }
  .button .tilt-13:active ~ .background,
  .button .tilt-13:active ~ .text {
    transform: skewY(1.1deg);
  }
  .button .tilt-14:active ~ .background,
  .button .tilt-14:active ~ .text {
    transform: skewY(1.3deg);
  }
  .button .tilt-15:active ~ .background,
  .button .tilt-15:active ~ .text {
    transform: skewY(1.5deg);
  }

  body {
    background: #e8f8f2;
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 25px,
      #d8f3e9 25px,
      #d8f3e9 50px
    );
    background-size: sqrt(5000px) sqrt(5000px);
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: Lato, Helvetica, sans-serif;
  }
`;

const PadButton = (props: any) => {
  const { setButtonContent, children } = props;
  return (
    <PadButtonWrapper>
      <div
        className="button"
        onClick={() => {
          setButtonContent(children);
        }}
      >
        <span className="tilt tilt-1"></span>
        <span className="tilt tilt-2"></span>
        <span className="tilt tilt-3"></span>
        <span className="tilt tilt-4"></span>
        <span className="tilt tilt-5"></span>
        <span className="tilt tilt-6"></span>
        <span className="tilt tilt-7"></span>
        <span className="tilt tilt-8"></span>
        <span className="tilt tilt-9"></span>
        <span className="tilt tilt-10"></span>
        <span className="tilt tilt-11"></span>
        <span className="tilt tilt-12"></span>
        <span className="tilt tilt-13"></span>
        <span className="tilt tilt-14"></span>
        <span className="tilt tilt-15"></span>
        <div className="text">{children}</div>
        <div className="background"></div>
      </div>
    </PadButtonWrapper>
  );
};
export default PadButton;
